<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{
            margin: 0;
            height: 100%;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            height: 100%;
            /* 可以通过display: flex; 将标签转化为弹性盒 */
            display: flex;
            /* flex-direction 
            设置主轴方向的方法 
            默认值是row 也就是横向排列  
            column纵向排列
            row-reverse 横向反向排列
            column-reverse纵向反向排列*/
            flex-direction: row;
            /* 
            定义弹性项在主轴方向上的对齐方式
            弹性项是弹性盒中的一级子元素
            flex-start 弹性项左对齐
            flex-end 弹性项又对齐
            center 居中对齐
            space-between 中间留白两边对齐
            space-around 弹性项中间的空白是弹性盒两边的一倍
             */
            justify-content: space-between;
            /* 定义弹性项在主轴的交叉轴方向的对齐方式
            flex-start | flex-end | center|stretch  */
            /* align-items: center; */
            /* flex-wrap 定义弹性项的换行方式 默认值是 nowrap 表示不换行*/
            /* flex-wrap: wrap; */
            /* align-content 定义多根轴线时交叉轴的对齐方式
                flex-start | flex-end | center | space-between | space-around | stretch;
             */
            /* align-content: flex-start; */
        }

        li{
            /* width: 200px; */
            /* 弹性项在主轴方向上的扩展距离 */
            flex-basis: 50%; 
            background-color: red;
            height: 100px;
            /* margin-left: 10px; */
            /* margin-top: 10px; */
            font-size: 30px;
            font-weight: bold;
            color: #fff;
            /* flex-grow: 1; */
            background-color: blue;
            /* flex-shrink定义弹性项的压缩比例 */
            flex-shrink: 0;
            flex-grow: 0;

        }
        .item2{
            /* flex-grow 定义弹性项的放大比例 */
            /* flex-grow: 2; */
            background-color: red;

        }
        .item3 {
            flex-shrink: 0;
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li class="item2">2</li>
        <li class="item3">3</li>
        <li>4</li>
        <li>5</li>
        <!-- <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li> -->
    </ul>
</body>
</html>